<template>
  <div class="module-box">
    <el-row :gutter="10">
      <el-col v-for="(item, index) in module.props.items" :key="index" :span="8">
        <el-card :body-style="{ padding: '10px' }">
          <a :href="item.url" target="_blank">
            <img :src="item.image" alt="item.name" style="width: 100%;">
            <div>{{ item.name }}</div>
            <div style="color: #409EFF;">外链商品</div>
          </a>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ExternalProductModule',
  props: ['module'],
}
</script>

<style scoped>
.module-box { padding: 10px; border: 1px solid #ddd; }
</style>